<script>
	export default {
		onLaunch: function() {
			this.getSystemInfo();
			let token = uni.getStorageSync('logintoken') || '';
			if(token){
				// this.$store.dispatch('getuserInfo');
			}
		},
		onShow: function() {
            
		},
		globalData: {
			
		},
		methods:{
			getSystemInfo(){
				uni.getSystemInfo({
					success: (result) => {
					// 获取手机系统的状态栏高度（不同手机的状态栏高度不同）  （ 不要使用uni-app官方文档的var(--status-bar-height) 官方这个是固定的20px  不对的 ）
					let statusBarHeight = result.statusBarHeight 
					// #ifdef MP
					const menuButtonInfo = uni.getMenuButtonBoundingClientRect()		// 获取右侧胶囊的信息 单位px
					//bottom: 胶囊底部距离屏幕顶部的距离//height: 胶囊高度//left:   胶囊左侧距离屏幕左侧的距离
					//right:  胶囊右侧距离屏幕左侧的距离//top:    胶囊顶部距离屏幕顶部的距离//width:  胶囊宽度
					// console.log(menuButtonInfo.width, menuButtonInfo.height, menuButtonInfo.top)
					// console.log('计算胶囊右侧距离屏幕右边距离', result.screenWidth - menuButtonInfo.right)
					let menuWidth = menuButtonInfo.width 
					let menuHeight = menuButtonInfo.height 
					let menuBorderRadius = menuButtonInfo.height / 2 
					let menuRight = result.screenWidth - menuButtonInfo.right 
					let menuTop = menuButtonInfo.top 
					let contentTop = result.statusBarHeight + 44 
					let menuInfo = {
					  statusBarHeight: statusBarHeight,//状态栏高度----用来给自定义导航条页面的顶部导航条设计padding-top使用：目的留出系统的状态栏区域
					  menuWidth: menuWidth,//右侧的胶囊宽度--用来给自定义导航条页面的左侧胶囊设置使用
					  menuHeight: menuHeight,//右侧的胶囊高度--用来给自定义导航条页面的左侧胶囊设置使用
					  menuBorderRadius: menuBorderRadius,//一半的圆角--用来给自定义导航条页面的左侧胶囊设置使用
					  menuRight: menuRight,//右侧的胶囊距离右侧屏幕距离--用来给自定义导航条页面的左侧胶囊设置使用
					  menuTop: menuTop,//右侧的胶囊顶部距离屏幕顶部的距离--用来给自定义导航条页面的左侧胶囊设置使用
					  contentTop: contentTop,//内容区距离页面最上方的高度--用来给自定义导航条页面的内容区定位距离使用
					}
					uni.setStorageSync('menuInfo', menuInfo)
					// #endif
				  },
				  fail: (error) => {
					console.log(error)
				  }
				})
			}
		}
	}
</script>

<style lang="scss">
	/* 注意要写在第一行，同时给style标签加入lang="scss"属性 */
	// @import "uview-ui/index.scss";
	/*每个页面公共css */
	@import '@/static/css/common.css';
	page{
		background-color: #f7f7f7;
	}
	.status_bar {
		height: var(--status-bar-height);  
		width: 100%;  
		background-color: #ffffff; 
	} 
	.top_view {  
		height: var(--status-bar-height);  
		width: 100%;  
		position: fixed;  
		background-color: #ffffff;
		top: 0;  
		z-index: 999;  
	}
	button::after {
	 	border: none;
	}
    .titleText{
    		  position: relative;
    		  z-index: 22;
    		  text-align: center;
    		  font-size: 32rpx;
    		  color: #FFFFFF;
    }
    .bgShadow{
        box-shadow: 0rpx 3rpx 0rpx 0rpx rgba(9,2,4,0.03);
    }
  
</style>
